<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>page</title>

    <!-- Bootstrap core CSS -->
    <link href="../res/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../res/css/navbar-fixed-top.css" rel="stylesheet">
    <link rel="stylesheet" href="../res/css/common.css">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>

    <![endif]-->

    <link rel="stylesheet" href="../res/plugins/select2/css/select2.css">
      <link rel="stylesheet" href="../res/plugins/bootstrap-pagination/css/bootstrap-pagination.css"/>
          <link rel="stylesheet" href="../res/css/data-table.css">
<link rel="stylesheet" href="../res/plugins/jquery-tableSorting/css/jquery.tableSorting.css">


  </head>

  <body>
    <h1>pagination相关数据</h1>

    <div class="data-table-wrap" style="border:1px solid #ddd;">
        <table id="customerTable" class="table table-hover table-non-border">
            <thead>
            <tr class="text-center">
                <th class="sorting" data-sorting-name="id">序号</th>
                <th class="sorting" data-sorting-name="account">账号</th>
                <th class="sorting sorting_asc" data-sorting-name="name">姓名</th>
                <th class="sorting sorting_desc" data-sorting-name="phone">手机号码</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>微信</th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody id="employee-list-tbody">

            </tbody>
        </table>
    </div><!-- /table -->


    <div id="test12345"></div>

    <hr/>
    <div id="testArea">

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../res/plugins/jquery/jquery-2.2.0.min.js"></script>
    <script src="../res/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../res/plugins/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script src="../res/plugins/select2/js/select2.full.js"></script>
    
    <script src="../res/plugins/bootstrap-paginator/bootstrap-paginator.min.js"></script>
    <script src="../res/plugins/bootstrap-pagination/js/bootstrap-pagination.js"></script>
    <script src="../res/plugins/jquery-tableSorting/js/jquery.tableSorting.js"></script>


	<script>
        var CustomerList = (function(){
            var $tableBody = $("#employee-list-tbody");
            var $pageEle = $("#test12345");

            return {
                init : function(){
                    this.loadListData();
                },
                loadListData : function(type,pageIndex,pageSize){
                    var _this = this;
                    console.log("正在加载客户数据,请稍候....");
                    pageIndex = pageIndex || 1;
                    pageSize = pageSize || 10;
                    console.log(pageIndex);
                    console.log(pageSize);

                    var param = {
                        pageIndex : pageIndex,
                        pageSize : pageSize
                    };
                    $.ajax({
                        type: "GET",
                        url: "testData.html",
                        data: param,
                        success: function(result){
                            console.log(result);
                            $tableBody.html($(result));
                            var v = $tableBody.find("input.paginationHiddenData").val();
                            console.log("++++");
                            console.log(v);
                            var pageInfo = JSON.parse(v);
                            console.log(pageInfo);
                            _this.pagination(pageInfo);
                        },
                        error: function(xhr, textStatus, ex) {
                            alert('error.......');
                        }
                    });

                },
                pagination :function (pageInfo){
                    var _this = this;
                    $pageEle.bootstrapPagination("destroy");
                    $pageEle.bootstrapPagination({
                        pageIndex:pageInfo.pageIndex,
                        pageSize :pageInfo.pageSize,
                        totalPages:pageInfo.totalPages,
                        totalCount:pageInfo.totalCount,
                        onCallback : function(e,type,pageIndex,pageSize){
                            console.log("onCallback");
                            console.log(type+"-"+pageIndex+"-"+pageSize);
                            _this.loadListData(type,pageIndex,pageSize);
                        }
                    });

                }

            }
        })();


        CustomerList.init();


		$("#customerTable").tableSorting({
            name:"id",
            type:"asc",
           onCallback : function(e,name,type){
               alert("html name:"+name+"-type:"+type);
               var info = $("#customerTable").tableSorting('getSortingInfo');
               console.log(info);
           }
        });

	</script>

  </body>
</html>
